<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学校通知</title>
    <script src="../../utf8-jsp/ueditor.config.js"></script>
    <script src="../../utf8-jsp/ueditor.all.js"></script>
    <script src="../../utf8-jsp/lang/zh-cn/zh-cn.js"></script>
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />

    <style>
      .cell{
          display: flex;
      }
      .cell button{
          flex: 1;
          width: 30px;
          justify-content: center;
      }

      .el-input__inner{
          height: 30px;
      }

    </style>

</head>
<body>


<div id="app">

    <el-tabs type="border-card">

        <el-tab-pane label="学校通知">
            <div>
                <span style="font-size: 13px"> 通知标题:</span>
                <input type="text" name="name" v-model="searchName"
                       style="-webkit-appearance: none;background: #FFF;border-radius: 4px;border: 1px solid #DCDFE6;
                    box-sizing: border-box;color: #606266;display: inline-block;font-size: inherit;height: 28px;line-height: 35px;
                    outline: 0;padding: 0 15px;width: 150px"
                >
                <span style="font-size: 13px"> 通知类型:</span>
                <template>
                    <el-select v-model="value" filterable placeholder="请选择" size="mini">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
                <span style="font-size: 13px"> 通知状态:</span>
                <template>
                    <el-select v-model="value" filterable placeholder="请选择" size="mini">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>

                <el-button type="primary" size="mini" >查询</el-button>
                <el-button size="mini">重置</el-button>

                <el-button type="primary" size="mini"   @click="dialog = true">学校通知</el-button>
            </div>


             <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        label="序号"
                        prop="id" >
                </el-table-column>
                <el-table-column
                        label="通知标题"
                        prop="title">
                </el-table-column>
                <el-table-column
                        label="通知类型"
                        prop="type">
                </el-table-column>
                <el-table-column
                        label="通知人员"
                        prop="notice">
                </el-table-column>
                <el-table-column
                        label="通知状态"
                        prop="noticeStatus">
                </el-table-column>
                <el-table-column
                        label="添加时间"
                        prop="addTime">
                </el-table-column>
                <el-table-column
                        label="操作人"
                        prop="operator">
                </el-table-column>

                <el-table-column
                        label="操作"
                        align="center"  style="display: flex;">
                    <template slot-scope="scope" >
                        <el-button v-if="scope.row.noticeStatus==1"
                                size="mini"
                                @click="releaseHandleMessage(scope.row.branId)" style="text-align: center">发布</el-button>
                        <el-button v-if="scope.row.noticeStatus==0 "
                                   size="mini"
                                   @click="releaseHandleMessage(scope.row.branId)" style="color: red;text-align: center">取消发布</el-button>
                        <el-button
                                size="mini"
                                @click="updateHandleMessage(scope.row.branId)" style="text-align: center">编辑</el-button>
                        <el-button
                                size="mini"
                                @click="deleteHandleMessage(scope.row.branId)" style="text-align: center">删除</el-button>

                    </template>
                </el-table-column>
            </el-table>
            <el-drawer
                    title="添加通知"
                    :before-close="handleClose"
                    :visible.sync="dialog"
                    direction="rtl"
                    custom-class="demo-drawer"
                    ref="drawer"
                    size="50%"
            >
                <div class="demo-drawer__content" >
                    <el-form :model="form">
                        <el-form-item label="通知标题" :label-width="formLabelWidth" >
                            <el-input v-model="form.name" autocomplete="off" ></el-input>
                        </el-form-item>
                        <el-form-item label="通知人员" :label-width="formLabelWidth">
                            <el-select v-model="form.region"  style="width: 100%">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="通知状态" :label-width="formLabelWidth" >
                            <el-radio v-model="radio" label="1">发布</el-radio>
                            <el-radio v-model="radio" label="2">保存草稿</el-radio>
                        </el-form-item>
                        <el-form-item label="通知图片" :label-width="formLabelWidth" >
                            <el-upload
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    list-type="picture-card"
                                    :on-preview="handlePictureCardPreview"
                                    :on-remove="handleRemove">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                        </el-form-item>
                        <el-form-item label="通知内容" :label-width="formLabelWidth" >
                       <textarea rows="10" cols="80" style="overflow-y:scroll "></textarea>

<!--                            <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>-->
                        </el-form-item>
                    </el-form>
                    <div class="demo-drawer__footer" style="text-align: center">
                        <el-button type="primary" @click="$refs.drawer.closeDrawer()" >确 定</el-button>
                        <el-button @click="cancelForm" >取 消</el-button>

                    </div>
                </div>
            </el-drawer>

        </el-tab-pane>


    </el-tabs>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>

</body>
</html>

<script>


    new Vue({
        el:"#app",
        data() {
            return {
                options: [
                    { value: '选项1', label: '黄金糕' },
                    { value: '选项2', label: '双皮奶' },
                    { value: '选项3', label: '蚵仔煎' },
                    { value: '选项4', label: '龙须面' },
                    { value: '选项5', label: '北京烤鸭' },
                    ],
                  value: '',
                 searchName:'',
                tableData: [{
                    id:1,
                    title: 'schoolName',
                    type: 'Faculties',
                    notice: 'startYear',
                    noticeStatus: 1,
                    type:'class',
                    addTime: '2022-12-10',
                    operator: '小胖',
                }],
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '80px',
                timer: null,
                dialog:false,
                dialogImageUrl: '',
                dialogVisible: false,
                radio:''
            }
        },
        methods:{
            created(){
                var ue = UE.getEditor('editor');
            },
            mounted(){

            },
            handleClose(done) {
                if (this.loading) {
                    return;
                }
                this.$confirm('确定要提交表单吗？')
                    .then(_ => {
                        this.loading = true;
                        this.timer = setTimeout(() => {
                            done();
                            // 动画关闭需要一定的时间
                            setTimeout(() => {
                                this.loading = false;
                            }, 400);
                        }, 2000);
                    })
                    .catch(_ => {});
            },
            cancelForm() {
                this.loading = false;
                this.dialog = false;
                clearTimeout(this.timer);
            },
            // 删除
            deleteHandleMessage(id) {
                console.log(id)
                var ids = id
                    ? [id]
                    : this.dataListSelectionsMessage.map(item => {
                        return item.brandId;
                    });
                this.$confirm(
                    `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }
                ).then(() => {
                    console.log(ids)
                    //发送请求
                });
            },
            releaseHandleMessage(id){},

            updateHandleMessage(id){},

            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            }

        }
    })
</script>



